<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 拨打电话 -->
  <a href="tel:10086">拨打电话给10086小姐姐</a>

  <!-- 发送短信 -->
  <a href="sms:10086">发送短信给10086小姐姐</a>

  <!-- 发送邮件 -->
  <a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>

  <!-- 选择照片或拍摄照片 -->
  <input type="file" id="file1" accept="image/*" oninput="fileChange()" multiple>

  <img src="" alt="上传" id="upLoadImg">

  <input type="file" id="file2" accept="video/*">

  <!-- 多选文件 -->
  <input type="file" id="file3" multiple oninput="fileAllChange()">

  <!-- URL类型 -->
  URL类型: <input type="url" name="" id="">
  date类型: <input type="date" name="" id="dataId" onchange="colorChange()">
  time类型: <input type="time" name="" id="timeId" onchange="colorChange()">
  month类型: <input type="month" name="" id="monthId" onchange="colorChange()">
  week类型: <input type="week" name="" id="weekId" onchange="colorChange()">
  range类型: <input type="range" name="" id="rangeId" onchange="colorChange()">
  search类型: <input type="search" name="" id="searchId" onchange="colorChange()">
  color类型: <input type="color" name="" id="colorId" onchange="colorChange()" >
  <input type="text" list="colorList">
  <details id="colorList">
    <option value="#000">黑</option>
    <option value="#fff">白</option>
    <option value="#f00">红</option>
  </details>

  <hr />
  <!-- 打开微信 -->
  <a href="weixin://">打开微信</a>

  <!-- 打开支付宝的扫一扫 -->
  <a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>



  <input autocapitalize="off" autocorrect="off">

  <script>
    const file1 = document.getElementById('file1')
    const file3 = document.getElementById('file3')
    const upLoadImg = document.getElementById('upLoadImg')

    function fileChange() {
      let reader = new FileReader()
      reader.readAsDataURL(file1.files[0])
      reader.onload = function () {
        upLoadImg.src = reader.result
      }
    }

    function readFileAsync(file) {
      return new Promise((resolve) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function () {
          resolve(this.result)
        }
      })
    }

    async function fileAllChange() {
      const fileArr = Array.from(file3.files)
      const resolveList = new Array()

      for (let i = 0; i < fileArr.length; i++) {
        console.log(fileArr[i])
        resolveList.push(await readFileAsync(fileArr[i]))
      }

      console.log(resolveList)
    }


    function colorChange(e) {
    //   console.log('dataId',dataId.value)
    //   console.log('timeId',timeId.value)
    //   console.log('monthId',monthId.value)
    //   console.log('weekId',weekId.value)
    //   console.log('rangeId',rangeId.value)
    //   console.log('searchId',searchId.value)
      console.log('colorId',colorId.value)
    }
  </script>
</body>

</html>